<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.scope { position:absolute; background-color: #fe78fe; border: thin black solid; }
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

var ixx = 0; 
var ixxl = 0; 
var xx = [ ];

function displaynext()
{
    if ((ixx < xx.length) && (ixxl < xx[ixx].length))
    {
        var d = document.getElementById("metropanel");
        var p = document.createElement("div");
        xo = xx[ixx][ixxl]; 
        p.innerHTML = "<a href=\"" + xo.url + "\">" + xo.title + "</a>";
        p.className = "scope";
        //backgroundColor = "#ffbbbb";
        //p.style.display = "inline";
        var ix = Math.floor(Math.random() * 400);
        var iy = Math.floor(Math.random() * 300);
        p.style.left = ix + "px";
        p.style.top = iy + "px";
        //p.style.position = "absolute";
        d.appendChild(p); 
alert(p.offsetWidth);

        ixxl++;
        if (ixxl >= xx[ixx].length)
        {
            ixxl = 0; 
            ixx++; 
        }
    }
}

function callbackappend(data)
{
 // taking care of data
 //   alert(data.responseText)
    eval("var xx1 = " + data.responseText);
    xx[xx.length] = xx1;
    alert(xx.length);
}


function test()
{
var sPost = "act=json&limit=5";
ghgh = "http://www.freesteel.co.uk/cgi-bin/hackday/hackdaydb.py";
var oAjax = new Ajax.Request(ghgh, {method: 'post',  postBody: sPost,  onComplete: callbackappend});
}


function init()
{
test();
}
</script>

<body onload="init()">
    <h1>What goes here</h1>
<p><a onclick="displaynext()">Press this</a></p>
<p><a onclick="test()">The Init One</a></p>
    <div id="metropanel" style="background-color:#b9c9e9; width:600px; height:300px;position:absolute">
    <div style="left:100px; background-color:green;position:absolute">jjj</div>
    </div>
<h2 id="test">even more</h2>

</body>
</html>

